<template>
  <div class="m-tag" :class="{ 'active': active }" @click.stop="handleClick">
    <span class="text_white font14" :style="disabled ? '' : 'margin-right: 5px;'">
      <slot></slot>
    </span>
    <i class="icon iconfont iconclose font12 text_white" v-if="!disabled" @click.stop="handleClose"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  mounted() {},
  methods: {
    handleClick() {
      this.$emit('click')
    },
    handleClose() {
      this.$emit('close')
    },
  }
};
</script>

<style lang="scss">
.m-tag {
  display: inline-block;
  cursor: pointer;
  min-width: 100px;
  height: 58px;
  text-align: center;
  line-height: 58px;
  padding: 0 10px;
  box-sizing: border-box;
  .iconfont {
    margin: 0;
  }
  &:hover ,
  &.active{
    background-color: rgba(0,0,0,.4);
  }
}
</style>
